<template>
  <div class="todo-container">
	  <div class="todo-wrap">
         <Header 
              :addTodo='addTodo'
         /> 
         <List 
              :todos='todos' 
              :checkTodo='checkTodo'
              :deleteTodo='deleteTodo'
              />  
         <Footer 
              :todos='todos'
              :checkAllTodo='checkAllTodo'
              :clearAllTodo='clearAllTodo'
              />
      </div>   
  </div>
   
</template>

<script>
    import Header from "./components/Header";
    import List from "./components/List";
    import Footer from "./components/Footer";

export default {
    name:'App',
    components:{
        Header,
        List,
        Footer
    },
    data() {
       return {
            //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在他们的共同的父亲App组件中中（状态提升）
          todos:JSON.parse(localStorage.getItem('todos'))||[]
            }
        },
    methods: {
          //添加一个todo
        addTodo(todoObj){
                this.todos.unshift(todoObj)
            },
          //勾选or取消勾选一个todo
        checkTodo(id){
            this.todos.forEach(todo=>{
                if(todo.id === id) todo.done = !todo.done  
            })
          },
        //删除一个todo
        deleteTodo(id){
          this.todos = this.todos.filter(todo=>todo.id !== id)
          },
        //全选or取消全选
        checkAllTodo(done){
           this.todos.forEach(todo=>{
                todo.done = done
           })
        },
        // 清除所有已经完成的todo
        clearAllTodo(){
            this.todos = this.todos.filter(todo=>!todo.done)
        }
    },
    watch:{
         todos:{
            deep:true,
            handler(value){
                  localStorage.setItem('todos',JSON.stringify(value))
           }
          }
         
    }
       
    
   
}
</script>

<style>
    body {
    background: #fff;
    }
    .btn {
       display: inline-block;
       padding: 4px 12px;
       margin-bottom: 0;
       font-size: 14px;
       line-height: 20px;
       text-align: center;
       vertical-align: middle;
       cursor: pointer;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                        0 1px 2px rgba(0, 0, 0, 0.05);
       border-radius: 4px;
                }
    .btn-danger {
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }
    .btn-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }
    .btn:focus {
        outline: none;
    }
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }               
</style>